/* eslint-disable react/jsx-no-bind */
import React from 'react';
import {
    Form,
    Card,
    Button,
    Alert,
    Affix,
} from 'antd';
import { StyleEditProps } from '../props-type';
import '../style/index.less';

/**
 * 组件功能：样式编辑区块页面
 *
 */
const StyleEditor = ({
    isDivider,
    cellSelectedId,
    cellSelectedRowId,
    cellSelectedBlockId,
    cellSelectedJson,
    rowSelectedJson,
    billJson,
    onEditCell,
    onEditBlankDivider,
}: StyleEditProps) => {
    // 递归计算选择的cellid
    const selectedCellId = [];
    // 计算出当前所有顶级的cellId数组，然后判断如果该cell在顶级的数组里，那么就显示分割线跟空行，否则就不显示
    const getSelectedCellId = (rows) => {
        rows.forEach((itemRows) => {
            const { cell } = itemRows;
            // 渲染具体的cell项
            cell.forEach((itemCell) => {
                const { title, data_value, cell_id } = itemCell;
                // 过滤空行跟分割线
                if (title || data_value) {
                    // 考虑不能重复加入
                    if (selectedCellId.indexOf(cell_id) < 0) {
                        selectedCellId.push(cell_id);
                    }
                }
            });
        });
    };
    if (billJson && billJson.block && Array.isArray(billJson.block) && billJson.block.length > 0) {
        billJson.block.forEach(blockItem => {
            // 根据blockId做一层过滤，缩小范围，这里不用rowId过滤是因为如果子层的话，过滤出来的还是下面的cellId
            // 我们尽可能追求性能最优
            if (blockItem.block_id === cellSelectedBlockId) {
                getSelectedCellId(blockItem.rows);
            }
        });
    }
    const isSupperCell = selectedCellId.indexOf(cellSelectedId) > -1;
    // 解构选中的行数据，用于做判断
    const { row_style } = rowSelectedJson;
    const rowStyleArray = row_style ? row_style.split(',') : [];
    // 先解构出font_style,然后转换为数组
    const { font_style, name } = cellSelectedJson;
    const fontStyleArray = font_style ? font_style.split(',') : [];
    // 大小：根据相应的事件进行不同的处理，这里需要对billJson进行处理
    const handleChangefontSize = (value) => {
        // 这里计算font_style的最新值
        fontStyleArray[0] = value;
        fontStyleArray[1] = value;
        const cacheFontStyle = fontStyleArray.join(',');
        // 调用改写json方法
        onEditCell(cellSelectedBlockId, cellSelectedRowId, cellSelectedId, { font_style: cacheFontStyle });
    };
    // 粗细：根据相应的事件进行不同的处理，这里需要对billJson进行处理
    const handleChangefontWeight = (value) => {
        // 这里计算font_style的最新值
        fontStyleArray[2] = value;
        const cacheFontStyle = fontStyleArray.join(',');
        // 调用改写json方法
        onEditCell(cellSelectedBlockId, cellSelectedRowId, cellSelectedId, { font_style: cacheFontStyle });
    };
    // 对齐：根据相应的事件进行不同的处理，这里需要对billJson进行处理
    const handleChangefontAlign = (value) => {
        // 这里计算font_style的最新值
        fontStyleArray[4] = value;
        const cacheFontStyle = fontStyleArray.join(',');
        // 调用改写json方法
        onEditCell(cellSelectedBlockId, cellSelectedRowId, cellSelectedId, { font_style: cacheFontStyle });
    };
    const formItemLayout = {
        labelCol: { span: 10 },
        wrapperCol: { span: 14 },
    };
    // *****offsetTop计算：浏览器可见区高度-页面头部占用（144）-返回工具栏及必要padding（80）-工具栏最大高度（402）= 弹性最大高度*****
    // 如果弹性最大高度在0~50之间就取弹性高度的值，否则要么是0，要么是50;这里没做window.onresize是因为暂时不起作用
    let availHeight = 0;
    availHeight = document.body.clientHeight - 144 - 80 - 402;
    let offsetTopHight = 0;
    if (availHeight < 0) {
        offsetTopHight = 0;
    } else if (availHeight > 50) {
        offsetTopHight = 50;
    } else {
        offsetTopHight = availHeight;
    }

    return (
        <div className="style-editor">
            <Affix offsetTop={offsetTopHight} target={() => document.getElementById('content-wrapper')}>
                <div className="slide-set">
                    <Form {...formItemLayout}>
                        <Card title="样式编辑">
                            {!cellSelectedId && <Alert message="请选择右侧预览区节点进行设置！" type="warning" banner />}
                            {cellSelectedId && <div>
                                <Alert message={`【${name}】`} type="info" banner />
                                <div className="block">
                                    <dl className="dl-btn-action">
                                        <dt className="dt-btn-action">字号：</dt>
                                        <dd className="dd-btn-action">
                                            <Button type={fontStyleArray[0] === '0' ? 'primary' : 'default'} size="small" onClick={() => handleChangefontSize('0')}>小</Button>
                                            <Button type={fontStyleArray[0] === '1' ? 'primary' : 'default'} size="small" onClick={() => handleChangefontSize('1')}>中</Button>
                                            <Button type={fontStyleArray[0] === '2' ? 'primary' : 'default'} size="small" onClick={() => handleChangefontSize('2')}>大</Button>
                                        </dd>
                                    </dl>
                                    <dl className="dl-btn-action">
                                        <dt className="dt-btn-action">字重：</dt>
                                        <dd className="dd-btn-action">
                                            <Button type={fontStyleArray[2] === '0' ? 'primary' : 'default'} size="small" onClick={() => handleChangefontWeight('0')}>普通</Button>
                                            <Button type={fontStyleArray[2] === '1' ? 'primary' : 'default'} size="small" onClick={() => handleChangefontWeight('1')}>加粗</Button>
                                        </dd>
                                    </dl>
                                    <dl className="dd-btn-action">
                                        <dt className="dt-btn-action">对齐：</dt>
                                        <dd className="dd-btn-action">
                                            <Button type={fontStyleArray[4] === '0' ? 'primary' : 'default'} size="small" title="左对齐" icon="align-left" onClick={() => handleChangefontAlign('0')} />
                                            <Button type={fontStyleArray[4] === '1' ? 'primary' : 'default'} size="small" title="居中对齐" icon="align-center" onClick={() => handleChangefontAlign('1')} />
                                            <Button type={fontStyleArray[4] === '2' ? 'primary' : 'default'} size="small" title="右对齐" icon="align-right" onClick={() => handleChangefontAlign('2')} />
                                        </dd>
                                    </dl>
                                </div>
                                {isSupperCell && <div className="block">
                                    {/* 插入空行、移除空行、增加分割线、移除分割线的时候调用, 这里action是具体的操作：addBlack、delBlack、addDivider、delDivider */}
                                    {/* 这里分别对row_style的第三个字段做判断：如果小于5，那么可以增加空行；如果大于0，可以删除空行 */}
                                    {/* 空行跟分割线的操作，只针对与顶层对象，包括row_type为1的顶层对象 */}
                                    {!isDivider && <Button type="link" onClick={() => onEditBlankDivider(cellSelectedBlockId, rowSelectedJson, 'addDivider')}>下方插入分割线</Button>}
                                    {isDivider && <Button type="link" onClick={() => onEditBlankDivider(cellSelectedBlockId, rowSelectedJson, 'delDivider')}>移除下方分割线</Button>}
                                    {Number(rowStyleArray[2]) < 5 && <Button type="link" onClick={() => onEditBlankDivider(cellSelectedBlockId, rowSelectedJson, 'addBlack')}>上方插入空行</Button>}
                                    {Number(rowStyleArray[2]) > 0 && <Button type="link" onClick={() => onEditBlankDivider(cellSelectedBlockId, rowSelectedJson, 'delBlack')}>移除上方空行</Button>}
                                </div>}
                            </div>};
                        </Card>
                    </Form>
                </div>
            </Affix>
        </div>
    );
};

export default Form.create<StyleEditProps>()(StyleEditor);